<script setup>

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {getDetail} from "@/apis/detail.js";
import HotDetail from "@/views/Detail/components/HotDetail.vue";
import {useCartStore} from "@/stores/cartStore.js";
const goods = ref({})
const route = useRoute()
const cartStore = useCartStore()
const getGoods = async () => {
  const res = await getDetail(route.params.id)
  goods.value = res.result
}

onMounted(() => getGoods())

let skuObj = {}
const skuChange = (sku) => {
  console.log(sku)
  skuObj = sku
}

const count = ref(1)
const countChange = () => {
  console.log(count)
}
const addCart = () => {
  if (skuObj.skuId) {
    cartStore.addCart({
      id:goods.value.id,
      name:goods.value.name,
      picture:goods.value.mainPictures[0],
      price:goods.value.price,
      count:count.value,
      skuId:skuObj.skuId,
      attrsText:skuObj.specsText,
      selected:true
    })
  } else {
    ElMessage.warning('请选择规格！')
  }
}
</script>

<template>
    <div class="goods-page">
        <div class="container" v-if="goods.details">
          <div class="bread-container">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: `/cateogry/${goods.categories[1].id}` }">{{ goods.categories[1].name}}</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: `/category/${goods.categories[0].id}` }">{{ goods.categories[0].name}}</el-breadcrumb-item>
              <el-breadcrumb-item>{{ goods.name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="info-container">
            <div>
              <div class="goods-info">
                <div class="media">
                  <!--图片预览-->
                  <ImageView :image-list="goods.mainPictures"></ImageView>
                  <ul class="goods-sales">
                    <li>
                      <p>销量人气</p>
                      <p>{{ goods.salesCount }}+</p>
                      <p></p>
                    </li>
                    <li>
                      <p>商品评价</p>
                      <p>{{ goods.commentCount }}+</p>
                      <p></p>
                    </li>
                    <li>
                      <p>收藏人气</p>
                      <p>{{ goods.collectCount }}+</p>
                      <p></p>
                    </li>
                    <li>
                      <p>品牌信息</p>
                      <p>自有品牌</p>
                    </li>
                  </ul>
                </div>
                <div class="spec">
                  <p class="g-name">{{ goods.name }}</p>
                  <p class="g-desc">{{ goods.desc }}</p>
                  <p class="g-price">
                    <span>{{ goods.price }}</span>
                    <span>{{ goods.oldPrice }}</span>
                  </p>
                  <div class="g-service">
                    <dl>
                      <dt>促销</dt>
                      <dd>直降120</dd>
                    </dl>
                    <dl>
                      <dt>服务</dt>
                      <dd>
                        <span>无忧退货</span>
                        <span>快速退款</span>
                        <span>免费包邮</span>
                        <a href="">了解详情</a>
                      </dd>
                    </dl>
                  </div>
                  <Sku :goods="goods" @change="skuChange"/>
                  <el-input-number v-model="count" :min="1" :max="10" @change="countChange"/>
                  <div>
                    <el-button size="large" class="btn" @click="addCart">
                      加入购物车
                    </el-button>
                  </div>

                </div>
              </div>

            </div>
            <div class="goods-footer">
              <div class="goods-article">
                <div class="goods-tabs">
                  <nav>
                    <a>商品详情</a>
                  </nav>
                  <div class="goods-detail">
                    <ul class="attrs">
                      <li v-for="item in goods.details.properties" :key="item.value">
                        <span class="dt">{{ item.name }}</span>
                        <span class="dd">{{ item.value }}</span>
                      </li>
                    </ul>
                    <!--图片-->
                    <img v-for="img in goods.details.pictures" :src="img" :key="img" alt="">
                  </div>
                </div>
              </div>
              <div class="goods-aside">
                  <HotDetail :hot-type="1"></HotDetail>
                  <HotDetail :hot-type="2"></HotDetail>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.goods-page {

  .goods-info {
    min-height:600px;
    background-color: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;

      .g-name {
        font-size: 22px;
      }

      .g-desc {
        color: #999;
        margin-top: 10px;
      }

      .g-name {
        font-size: 22px;
      }
      .g-desc {
        color: #999;
        margin-top: 10px;
      }
      .g-price {
        margin-top: 10px;

        span {
          &::before{
            content: "￥";
            font-size: 14px;
          }
          &:first-child {
            color: $priceColor;
            margin-right: 10px;
            font-size: 22px;
          }
          &:last-child {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
          }
        }
      }
      .g-service {
        background-color: #f5f5f5;
        width: 500px;
        padding: 20px 10px 0 10px;
        margin-top: 10px;

        dl {
          padding-bottom: 20px;
          display: flex;
          align-items: center;

          dt {
            width: 50px;
            color: #999;
          }

          dd {
            color:#666;

            &:last-child{
              span {
                margin-right: 10px;

                &::before {
                  content: "-";
                  color: $xtxColor;
                  margin-right: 2px;
                }
              }

              a {
                color: $xtxColor;
              }
            }
          }
        }
      }
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }

    .goods-tabs {
      min-height: 600px;
      background-color: #fff;
    }

    .goods-warn {
      min-height: 600px;
      background-color: #fff;
      margin-top: 20px;
    }

    .number-box {
      display: flex;
      align-items: center;

      .label {
        width: 60px;
        color: #999;
        padding-left: 10px;
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      p {
        &:first-child {
          color: #999;
        }
        &:nth-child(2){
          color: $priceColor;
          margin-top: 10ppx;
        }
        &:last-child{
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }

        }
      }
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background-color: #fff;

  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
      padding:0 40px;
      font-size: 18px;
      position: relative;

      >span {
        color: $priceColor;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}

.goods-detail {
  padding:40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color:#999;
      }

      .dd{
        flex: 1;
        color: #666;
      }
    }
  }
  >img {
    width: 100%;
  }
}

.btn {
  margin-top: 20px;
}

.bread-container {
  padding:25px 0;
}
</style>